<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>爱听音乐</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background: url(img/beijing.jpg);
			}
			
			li {
				list-style: none;
			}
			
			#app {
				position: relative;
				width: 800px;
				height: 544px;
				margin: 200px auto;
			}
			
			.heard {
				position: relative;
				width: 800px;
				height: 60px;
				background: deepskyblue;
				line-height: 67px;
				z-index: 9;
			}
			
			.heard img {
				margin-left: 23px;
			}
			
			.heard input {
				box-sizing: border-box;
				position: absolute;
				right: 30px;
				top: 12px;
				width: 296px;
				height: 36px;
				border-radius: 65px;
				border: 0;
				outline: none;
				padding-left: 30px;
				font-size: 15px;
				background: rgba(255, 255, 255, 0.5);
			}
			
			.chaxun {
				display: inline-block;
				position: absolute;
				right: 30px;
				top: 20px;
				width: 30px;
				height: 30px;
				background: url(img/chaxun.png) no-repeat;
			}
			
			.center {
				position: relative;
				width: 800px;
				height: 435px;
				background: rgba(255, 255, 255, 0.5);
			}
			
			.center .mingdan {
				display: inline-block;
				width: 200px;
				height: 435px;
				float: left;
				box-sizing: border-box;
				padding: 10px;
			}
			
			.bfq {
				position: relative;
				display: inline-block;
				width: 400px;
				height: 435px;
				/*background: skyblue;*/
				text-align: center;
			}
			
			.bfq .xiangjiao2 {
				position: absolute;
				top: -16px;
				right: 116px;
			}
			
			.bfq .xiangjiao {
				margin-top: 58px;
			}
			
			.pj {
				display: inline-block;
				width: 200px;
				height: 435px;
				position: absolute;
				left: 600px;
				top: 0px;
			}
			
			.bofang {
				position: absolute;
				top: 112px;
				left: 125px;
				width: 150px;
				height: 150px;
				border-radius: 75px;
			}
			
			.mingdan ul li {
				font-size: 12px;
				color: #333;
				height: 40px;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				width: 580px;
				padding-left: 10px;
			}
			
			.mingdan ul li:nth-child(odd) {
				background: rgba(255, 255, 255, 0.3);
			}
			
			.play {
				display: block;
				width: 17px;
				height: 17px;
				background-image: url(img/play.png);
				background-size: 17px 17px;
				margin-right: 5px;
				box-sizing: border-box;
			}
			
			.mingdan ul li b {
				font-weight: normal;
				width: 122px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.list {
				width: 100%;
				overflow-y: auto;
				overflow-x: hidden;
				height: 100%;
			}
			
			.list::-webkit-scrollbar {
				display: none;
			}
			
			.qqq {
				position: absolute;
				left: 200px;
				top: 0;
				cursor: pointer;
			}
			
			.qqq2 {
				position: absolute;
				right: 200px;
				top: 0px;
			}
			
			.mingdan .list .mv {
				width: 23px;
				height: 17px;
				margin-right: 50px;
			}
			
			.mv i {
				display: block;
				width: 100%;
				height: 100%;
				background: url(img/jingling.png)left -48px no-repeat;
				cursor: pointer;
			}
			
			.title {
				margin-top: 10px;
				margin-left: 10px;
			}
			
			.pj2 {
				width: 200px;
				height: 435px;
				overflow: hidden;
				overflow-y: auto;
				overflow-x: hidden;
			}
			
			.pj2::-webkit-scrollbar {
				display: none;
			}
			/*去除滚动条*/
			
			.pj2 dl {
				padding-top: 10px;
				padding-left: 55px;
				position: relative;
				margin-bottom: 20px;
			}
			
			.pj2 dl dt {
				position: absolute;
				left: 4px;
			}
			
			.pj2 .name {
				font-weight: bold;
				color: #333333;
				padding-top: 5px;
			}
			
			.pj2 .pinglun {
				color: #666;
				margin-top: 5px;
				line-height: 18px;
				font-size: 15px;
			}
			
			.audio {
				z-index: 9999;
				width: 100%;
				height: 50px;
				background-color: #fffff;
				/*伪装没有圆角*/
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				overflow: hidden;
			}
			
			.myaudio {
				width: 100%;
				height: 50px;
				outline: none;
				background: #F1F3F4;
			}
			/* 旋转的动画 */
			
			@keyframes Rotate {
				from {
					transform: rotateZ(0);
				}
				to {
					transform: rotateZ(360deg);
				}
			}
			/* 旋转的类名 */
			
			.autoRotate {
				animation-name: Rotate;
				animation-iteration-count: infinite;
				animation-play-state: paused;
				animation-timing-function: linear;
				animation-duration: 5s;
			}
			/* 是否正在播放 */
			
			.bfq.playing .xiangjiao,
			.bfq.playing .bofang {
				animation-play-state: running;
			}
			
			.xiangjiao2 {
				position: absolute;
				left: 200px;
				top: -10px;
				z-index: 10;
				transform: rotate(-25deg);
				transform-origin: 12px 12px;
				transition: 1s;
			}
			/* 播放杆 转回去 */
			
			.bfq.playing .xiangjiao2 {
				transform: rotate(0);
			}
			
			.touxiang img {
				width: 40px;
				height: 40px;
			}
			
			.touxiang {
				overflow: hidden;
				width: 40px;
				height: 40px;
				border-radius: 20px;
			}
			.video_con video {
  position: fixed;
  width: 800px;
  height: 546px;
  left: 50%;
  top: 50%;
  margin-top: -273px;
  transform: translateX(-50%);
  z-index: 990;
}
.video_con .mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 980;
  background-color: rgba(0, 0, 0, 0.8);
}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="heard">
				<img src="img/id.png" />
				<input type="text" placeholder="输入查询音乐" v-model='query' @keyup.enter="search" />
				<span class="chaxun" @click="search"></span>
			</div>
			<div class="center">
				<div class="mingdan">
					<ul class="list">
						<li v-for="item in music">
							<a href="javascript:;" class="play" @click='playmusic(item.id)'></a>
							<b v-text="item.name"></b>
							<span class="mv" v-if="item.mvid!=0" @click="mvbf(item.mvid)">
								<i></i>
							</span>
						</li>

					</ul>
				</div>
				<img src="img/line.png" class="qqq" />
				<div class="bfq" :class="{playing:isplay}">

					<img src="img/jiaopian.png" class="xiangjiao autoRotate" />
					<img src="img/zhizheng.png" class="xiangjiao2" />
					<img :src="musicimg" class="bofang autoRotate" />
				</div>
				<img src="img/line.png" class="qqq2" />
				<div class="pj">
					<h5 class="title">热门留言</h5>
					<div class="pj2">
						<dl v-for="item in hotmusic">
							<dt class="touxiang"><img src="img/touxiang.png" :src='item.user.avatarUrl'/></dt>
							<dd class="name" v-text='item.user.nickname'>西红柿炒蛋</dd>
							<dd class="pinglun" v-text="item.content">吉他一响,黄金万两</dd>
						</dl>

					</div>
				</div>
			</div>
			<div class="audio">
				<audio src="unknown" :src="musicurl" controls autoplay loop class="myaudio" @play="play" @pause="pause"></audio>
			</div>
			<div class="video_con" v-if="ishow" >
				<video ref='video' :src='mvurl' controls="controls"></video>
				<div class="mask" @click="hidn" ></div>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
			//		  1:歌曲搜索接口
			//  请求地址:https://autumnfish.cn/search
			//  请求方法:get
			//  请求参数:keywords(查询关键字)
			//  响应内容:歌曲搜索结果
			//
			//2:歌曲url获取接口
			//  请求地址:https://autumnfish.cn/song/url
			//  请求方法:get
			//  请求参数:id(歌曲id)
			//  响应内容:歌曲url地址
			//3.歌曲详情获取
			//  请求地址:https://autumnfish.cn/song/detail
			//  请求方法:get
			//  请求参数:ids(歌曲id)
			//  响应内容:歌曲详情(包括封面信息)
			//4.热门评论获取
			//  请求地址:https://autumnfish.cn/comment/hot?type=0
			//  请求方法:get
			//  请求参数:id(歌曲id,地址中的type固定为0)
			//  响应内容:歌曲的热门评论
			//5.mv地址获取
			//  请求地址:https://autumnfish.cn/mv/url
			//  请求方法:get
			//  请求参数:id(mvid,为0表示没有mv)
			//  响应内容:mv的地址
			var app = new Vue({
				el: '#app',
				data: {
					query: '',
					music: [],
					musicurl: '',
					//歌曲封面
					musicimg: 'img/bofang.jpg',
					hotmusic: [],
					isplay: false,
					ishow:false,
					mvurl:''
				},
				methods: {

					search: function() {
						var that = this;
						//歌曲搜索结果
						axios.get('https://autumnfish.cn/search?keywords=' + this.query)
							.then(function(response) {
								//							console.log(response);
								that.music = response.data.result.songs;
//								console.log(that.music);
							}, function(err) {})
					},
					playmusic: function(musicid) {
						//						console.log(musicid);
						var that = this;
						axios.get('https://autumnfish.cn/song/url?id=' + musicid)
							.then(function(response) {
								//								console.log(response);
								//								console.log(response.data.data[0].url);
								that.musicurl = response.data.data[0].url;
							}, function(err) {});
						//歌曲封面获取
						axios.get('https://autumnfish.cn/song/detail?ids=' + musicid)
							.then(function(response) {
								//								console.log(response);
								//获取图片地址
								that.musicimg = response.data.songs[0].al.picUrl;
								//								console.log(response.data.songs[0].al.picUrl);
							}, function(err) {})
						//歌曲评论获取
						axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicid)
							.then(function(response) {
								//								console.log(response);
								//								console.log(response.data.hotComments);
								that.hotmusic = response.data.hotComments;
							}, function(err) {})
					},
					play: function() {
						//						console.log('play');
						this.isplay = true;
					},
					pause: function() {
						//						console.log('pause');
						this.isplay = false;
					},
					mvbf:function(mvid){
						var that=this;
						axios.get('https://autumnfish.cn/mv/url?id='+mvid)
						.then(function(response){
							console.log(response.data.data.url);
							that.ishow=true;
							that.mvurl=response.data.data.url
						},function(arr){})
					},
					hidn:function(){
						this.ishow=false;
						that.mvurl='';
					}
				}
			})
		</script>
	</body>

</html>